<template>
  <div>
    <el-dialog
      title="字典项管理"
      :visible.sync="show"
      width="80%"
      top="5vh"
      @close="close"
    >
      <el-form v-if="searchFormShow" ref="params" :model="params" :inline="true" class="search-form">
        <el-form-item label="字典项名称" prop="itemName">
          <el-input v-model="params.itemName" />
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="params.state" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="findPage">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetForm('params')">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row class="btn-group" type="flex" justify="space-between">
        <el-col span="20">
          <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
          <el-button
            type="success"
            icon="el-icon-edit"
            :disabled="multipleSelection.length!==1"
            @click="edit"
          >修改</el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            :disabled="multipleSelection.length===0"
            @click="remove"
          >删除</el-button>
          <el-button type="warning" icon="el-icon-download">导出</el-button>
        </el-col>
        <el-col span="4" align="right">
          <el-tooltip class="item" effect="dark" content="显示搜索" placement="top">
            <el-button icon="el-icon-search" circle @click="searchFormShow = !searchFormShow" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="刷新" placement="top">
            <el-button icon="el-icon-refresh" circle @click="findPage" />
          </el-tooltip>
        </el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :data="data"
        max-height="360px"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        />
        <el-table-column
          label="序号"
          type="index"
          align="center"
        />
        <el-table-column
          prop="itemCode"
          label="字典项编号"
          align="center"
        />
        <el-table-column
          prop="itemName"
          label="字典项名称"
          align="center"
        />
        <el-table-column
          prop="dictName"
          label="所属字典组"
          align="center"
        />
        <el-table-column
          prop="sort"
          label="排序"
          align="center"
        />
        <el-table-column
          prop="state"
          label="状态"
          align="center"
        >
          <template slot-scope="{row}">
            {{ row.state?"正常":"停用" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="note"
          label="备注"
          align="center"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="160"
          align="center"
        />
        <el-table-column label="操作" width="200px" align="center">
          <template slot-scope="{row}">
            <div>
              <el-button type="text" icon="el-icon-edit" @click="edit(row.id)">修改</el-button>
              <el-button type="text" icon="el-icon-delete" @click="remove(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="total"
        class="table—page"
        :current-page="page.current"
        :page-sizes="[10, 20, 30, 50,100]"
        :page-size="page.size"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-dialog>
    <dict-item-form :id.sync="id" :dict-id="dictId" :dict-code="dictCode" :title="title" :show.sync="dialogShow" />
  </div>
</template>

<script>
import { findPage, remove, removeIds } from '@/api/sys/dict-item'
import DictItemForm from './DictItemForm'

export default {
  name: 'DictItem',
  components: { DictItemForm },
  props: {
    dictId: {
      type: Number,
      default: null
    },
    dictCode: {
      type: String,
      default: ''
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      id: null,
      title: '添加字典项',
      options: [{ label: '停用', value: 0 }, { label: '正常', value: 1 }],
      data: [],
      page: { 'current': 1, 'size': 10 },
      params: { itemName: '', state: '' },
      total: 0,
      dialogShow: false,
      multipleSelection: [],
      searchFormShow: true
    }
  },
  watch: {
    dictId(val) {
      if (val) { this.findPage() }
    }
  },
  methods: {
    close() {
      this.$refs['params'].resetFields()
      this.$emit('update:show', false)
      this.$emit('update:dict-id', null)
    },
    handleNodeClick(data) {
      console.log(data)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.page.size = val
      this.findPage()
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.findPage()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    async findPage() {
      const page = { ...this.page }
      const params = { ...this.params }
      params.dictId = this.dictId
      const { data } = await findPage(page, params)
      this.data = data.records
      this.total = data.total
    },
    add() {
      this.title = '添加字典项'
      this.dialogShow = true
    },
    edit(id) {
      this.title = '修改字典项'
      this.dialogShow = true
      this.id = typeof id === 'number' ? id : this.multipleSelection[0].id
    },
    remove(id) {
      this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        if (typeof id === 'number') {
          await remove(id)
          await this.findPage()
        } else {
          const ids = []
          this.multipleSelection.map(val => {
            ids.push(val.id)
          })
          await removeIds(ids)
          await this.findPage()
        }
      })
    },
    handleItem() {
      this.title = '添加字典'
    }
  }
}
</script>

<style scoped>

</style>
